.pronunciation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  &.between {
    justify-content: space-between;
  }

  &.end {
    justify-content: flex-end;
  }
}

.info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.word {
  width: auto;

  text {
    font-size: 40rpx;
    color: #2D2D2D;

    &.active {
      color: #F0C34F;
    }
  }
}

.phonetic {
  margin-top: 20rpx;
  display: flex;
  align-items: center;

  text {
    font-size: 36rpx;
    color: #2D2D2D;
  }

  image {
    width: 40rpx;
    height: 40rpx;
    margin-left: 40rpx;
  }
}

.interpretation {
  margin-top: 30rpx;
  font-size: 36rpx;
  color: #2D2D2D;
}

.record {
  width: 100%;
}

.record_content {
  width: 100%;
}

.record_shape {
  width: 100%;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
}

.record_btn {
  display: flex;
  justify-content: center;
}

.record_btn_content {
  display: flex;
  flex-direction: column;
  align-items: center;

  &+.record_btn_content {
    margin-left: 40rpx;
  }
}

.record_btn_box {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #79C1FF;
  display: flex;
  justify-content: center;
  align-items: center;

  image {
    width: 64rpx;
    height: 64rpx;
  }
}

.record_btn_text {
  margin-top: 20rpx;
  font-size: 36rpx;
  color: #3172FE;
}

.result1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result1_title {
  font-size: 52rpx;
  color: #323232;
}

.result1_score {
  margin-top: 20rpx;
}

.score1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score1_num {
  display: flex;
  align-items: center;

  image {
    width: 89rpx;
    height: 85rpx;
  }

  view {
    margin: 0 30rpx;
    font-size: 52rpx;
    color: #323232;
  }
}

.score1_tips {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #323232;
}

.result1_content {
  margin-top: 40rpx;
}

.phoneme1 {
  width: 100%;
  height: 96rpx;
  display: flex;
}

.phoneme1_title {
  width: auto;
  height: 100%;
  margin-right: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  text {
    font-size: 32rpx;
    color: #3172FE;
  }
}

.phoneme1_container {
  width: auto;
  height: 100%;
  margin-left: 10rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .phoneme1_content {
    width: 120rpx;
    height: 100%;
    border-right: 2px dashed #323232;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      border-right: 0;
    }

    text {
      font-size: 32rpx;
      color: #323232;

      &.error {
        font-weight: 700;
        color: #CD1414;
      }

      &.correct {
        font-weight: 700;
        color: #218217;
      }
    }
  }
}

.result2 {
  width: 100%;
  height: 100%;
  padding: 0 50rpx;
}

.result2_content {
  width: 100%;
  height: 100%;
  background: #F5F3FF;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.result2_title {
  width: 100%;
  height: 92rpx;
  background: #83C6F7;
  font-size: 52rpx;
  color: #323232;
  line-height: 92rpx;
  text-align: center;
}

.result2_box {
  flex: 1;
  width: 100%;
  padding: 60rpx 40rpx;
  display: flex;
  align-items: center;
}

.result2_img {
  width: 448rpx;
  height: 600rpx;
  margin-right: 120rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.result2_section {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.score2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score2_num {
  display: flex;
  align-items: center;

  image {
    width: 89rpx;
    height: 85rpx;
  }

  view {
    margin: 0 30rpx;
    font-size: 52rpx;
    color: #323232;
  }
}

.score2_tips {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #323232;
}

.phoneme2 {
  height: 148rpx;
  display: flex;
}

.phoneme2_title {
  width: auto;
  height: 100%;
  margin-right: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  text {
    font-size: 44rpx;
    color: #3172FE;
  }
}

.phoneme2_container {
  width: auto;
  height: 100%;
  margin-left: 10rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .phoneme2_content {
    min-width: 120rpx;
    height: 100%;
    padding: 0 22rpx;
    border-right: 2px dashed #323232;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    &:last-child {
      border-right: 0;
    }

    text {
      font-size: 44rpx;
      color: #323232;

      &.error {
        font-weight: 700;
        color: #CD1414;
      }

      &.correct {
        font-weight: 700;
        color: #218217;
      }
    }
  }
}

.result2_btn {
  width: 100%;
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
}

.result2_btn_content {
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 30rpx;
  }

  &:nth-child(1) {
    width: 194rpx;
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/btn_bg1.png) center center/cover no-repeat;

    text {
      color: #FFFFFF;
    }
  }

  &:nth-child(2) {
    width: 216rpx;
    background: url(https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/btn_bg2.png) center center/cover no-repeat;

    text {
      color: #1089FE;
    }
  }

  &+.result2_btn_content {
    margin-left: 360rpx;
  }

}

.record-popup {
  width: 100%;
  height: 100%;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  background: #7db2df;
  border-radius: 56rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.record-popup_top {
  width: 100%;
  padding-left: 30rpx;
  padding-right: 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  image {
    width: 192rpx;
    height: 192rpx;
  }
}

@keyframes record {
  0% {
    transform: scaley(1);
  }

  50% {
    transform: scaley(0.4);
  }

  100% {
    transform: scaley(1);
  }
}

.record-popup_shape {
  width: 128rpx;
  display: flex;
  justify-content: space-between;

  view {
    width: 12rpx;
    height: 120rpx;
    background-color: #fff;
    border-radius: 6px;
    animation-fill-mode: both;
    animation: record 1s 0s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);

    &:nth-child(1),
    &:nth-child(4) {
      animation-delay: 0.2s;
    }

    &:nth-child(2),
    &:nth-child(5) {
      animation-delay: 0.4s;
    }

    &:nth-child(3),
    &:nth-child(6) {
      animation-delay: 0.6s;
    }
  }
}

.record-popup_bottom {
  font-size: 34rpx;
  color: #fff;
}